<template>
  <a-affix>
    <a-layout-header :style="headerStyle">
      <!-- 左侧面包屑 -->
      <div style="display: flex; align-items: end">
        <a-breadcrumb
          separator=">"
          style="margin-bottom: 20px; margin-left: 15px"
        >
          <a-breadcrumb-item
            v-for="(item, index) in $route.matched"
            :key="index"
          >
            <router-link
              v-if="item.path === '/index' ? false : true"
              :to="{ path: item.path }"
              ><h4 style="font-weight: bold;">{{ item.meta.title }}</h4></router-link
            >
          </a-breadcrumb-item>
        </a-breadcrumb>
      </div>

      <!-- 右侧内容 -->
      <div class="avatat_class">
        <!-- 管理员 -->
        <div v-if="isAdmin" style="margin-right: 40px">
          <router-link to="">
            <a-popover placement="leftTop">
              <a-badge :count="storeCounts">
                <BellOutlined :style="icon_style" />
              </a-badge>
              <template #title>
                <p>
                  <ExclamationCircleOutlined
                    style="color: #e6a23c; margin-right: 5px"
                  />审核通知
                </p>
              </template>
              <template #content>
                <p
                  v-if="storeCounts === 0 ? false : true"
                  style="letter-spacing: 2px; font-size: 13px"
                >
                  您有<span style="color: red; font-size: 14px">{{
                    storeCounts
                  }}</span
                  >个<span style="color: #e6a23c; font-size: 14px">店铺</span
                  >需审核
                </p>
                <a-empty
                  :image="simpleImage"
                  description="暂无任何通知"
                  v-if="storeGoodsCounts === 0 ? true : false"
                >
                </a-empty>
              </template>
            </a-popover>
          </router-link>
        </div>
        <!-- 非管理员 -->
        <div v-if="!isAdmin" style="margin-right: 40px">
          <router-link to="">
            <a-popover placement="leftTop">
              <a-badge :count="storeIsReadCounts">
                <BellOutlined :style="icon_style" />
              </a-badge>
              <template #title>
                <h3 style="font-weight: bold">
                  <ExclamationCircleOutlined
                    style="color: #e6a23c; margin-right: 5px"
                  />审核通知
                </h3>
              </template>
              <template #content>
                <p
                  v-if="storePassIsReadCounts === 0 ? false : true"
                  style="letter-spacing: 2px; font-size: 13px"
                >
                  您有<span style="color: #67c23a; font-size: 14px">{{
                    storePassIsReadCounts
                  }}</span
                  >个新<span style="color: #e6a23c; font-size: 14px">店铺</span
                  >审核通过
                </p>
                <p
                  v-if="storeUnPassIsReadCounts === 0 ? false : true"
                  style="letter-spacing: 2px; font-size: 13px"
                >
                  您有<span style="color: #67c23a; font-size: 14px">{{
                    storeUnPassIsReadCounts
                  }}</span
                  >个新<span style="color: #e6a23c; font-size: 14px">店铺</span
                  >审核未通过
                </p>
                <a-tag
                  v-if="storeIsReadCounts === 0 ? false : true"
                  @click="haveRead"
                >
                  <router-link to=""> 全部已读 </router-link>
                </a-tag>
                <a-empty
                  :image="simpleImage"
                  description="暂无任何通知"
                  v-if="storeIsReadCounts === 0 ? true : false"
                >
                </a-empty>
              </template>
            </a-popover>
          </router-link>
        </div>
        <div style="margin-right: 30px">
          <span style="font-size: 15px; font-weight: bold">{{
            adminStore.admin.name
          }}</span>
        </div>
        <a-dropdown placement="bottom">
          <a-avatar :src="avatar" shape="square" size="large">
            <template #icon><UserOutlined /></template>
          </a-avatar>
          <template #overlay>
            <a-menu @click="onClick">
              <a-menu-item key="1">退出登录</a-menu-item>
              <!-- <a-menu-item key="2">个人中心</a-menu-item> -->
            </a-menu>
          </template>
        </a-dropdown>
      </div>
    </a-layout-header>
  </a-affix>
</template>
<script setup>
import { ref, onMounted } from "vue";
import {
  UserOutlined,
  BellOutlined,
  ExclamationCircleOutlined,
} from "@ant-design/icons-vue";
import router from "@/router";
import { useAdminStore } from "@/stores/admin";
import { useAuthorizationStore } from "@/stores/authorization";
import { logout } from "@/api/login";
import { getStoreCounts, getStoreIsReadCounts, doRead } from "@/api/business";
import { Empty } from "ant-design-vue";

const simpleImage = Empty.PRESENTED_IMAGE_SIMPLE;

const adminStore = useAdminStore();
const authorizationStore = useAuthorizationStore();
//用户头像
const avatar = ref(null);
if (adminStore.admin.avatar) {
  avatar.value = adminStore.admin.avatar;
} else {
  avatar.value = adminStore.admin.image;
}

const isAdmin = ref(false);
if (adminStore.admin.role === "管理员") {
  isAdmin.value = true;
} else {
  isAdmin.value = false;
}

const storeCounts = ref(0);
const storeIsReadCounts = ref(0);
const storePassIsReadCounts = ref(0);
const storeUnPassIsReadCounts = ref(0);
onMounted(() => {
  if (adminStore.admin.role === "管理员") {
    //管理员获取待审核的店铺和商品通知
    getStoreCounts().then((res) => {
      if (res.code === 200) {
        storeCounts.value = res.data;
      }
    });
  } else {
    getStoreGoodsIsReadCountsMethod();
  }
});

//商户获取审核通过的店铺或者商品通知
function getStoreGoodsIsReadCountsMethod() {
  getStoreIsReadCounts(adminStore.admin.key).then((res) => {
    if (res.code === 200) {
      storePassIsReadCounts.value = res.data.passCounts;
      storeUnPassIsReadCounts.value = res.data.notPassCounts;
      storeIsReadCounts.value =
        storePassIsReadCounts.value + storeUnPassIsReadCounts.value;
    }
  });
}

//全部已读方法
function haveRead() {
  doRead(adminStore.admin.key).then((res) => {
    if (res.code === 200) {
      getStoreGoodsIsReadCountsMethod();
    }
  });
}

//退出登录接口
function onClick(e) {
  //退出登录操作
  if (e.key === "1") {
    logout(adminStore.admin.key).then((res) => {
      if (res.code === 200) {
        adminStore.removeAdmin();
        authorizationStore.removeAuthorization();
        router.push("/login");
      }
    });
  }
}

const icon_style = {
  fontSize: "18px",
};

const headerStyle = {
  backgroundColor: "#fff",
  padding: 0,
  display: "flex",
  justifyContent: "space-between",
};
</script>
<style scoped>
a:hover {
  color: #409EFF;
}
.avatat_class {
  align-items: center;
  justify-content: flex-end;
  display: flex;
  height: 100%;
  margin-right: 40px;
}
</style>